<template>
  <div class="fishing-grounds-bar-container">
    <div class="time-selector">
      <label 
        v-for="option in timeOptions" 
        :key="option.value"
        class="radio-label"
        :class="{ active: selectedTime === option.value }"
      >
        <input 
          type="radio" 
          :value="option.value" 
          v-model="selectedTime"
          @change="handleTimeChange"
          class="radio-input"
        />
        <span class="radio-text">{{ option.label }}</span>
      </label>
    </div>
    <div ref="chartContainer" class="chart-container"></div>
  </div>
</template>

<script>
import * as echarts from 'echarts'
import { createChartOption } from './option.js'

export default {
  name: 'FishingGroundsBar',
  data() {
    return {
      chartInstance: null,
      resizeObserver: null,
      selectedTime: 'week', // week, month, year
      timeOptions: [
        { label: '近一周', value: 'week' },
        { label: '近一月', value: 'month' },
        { label: '近一年', value: 'year' }
      ],
      fishingGrounds: [
        '印度洋公海渔场',
        '北太平洋公海渔场',
        '东南太平洋公海渔场',
        '西南大西洋公海渔场'
      ],
      colors: [
        'rgba(79,191,227,1)',
        'rgba(249,170,114,1)',
        'rgba(179,229,251,1)',
        'rgba(250,210,95,1)'
      ],
      mockData: {
        week: [
          { name: '印度洋公海渔场', value: 3200 },
          { name: '北太平洋公海渔场', value: 2800 },
          { name: '东南太平洋公海渔场', value: 3500 },
          { name: '西南大西洋公海渔场', value: 2100 }
        ],
        month: [
          { name: '印度洋公海渔场', value: 12500 },
          { name: '北太平洋公海渔场', value: 11200 },
          { name: '东南太平洋公海渔场', value: 13800 },
          { name: '西南大西洋公海渔场', value: 9800 }
        ],
        year: [
          { name: '印度洋公海渔场', value: 156000 },
          { name: '北太平洋公海渔场', value: 142000 },
          { name: '东南太平洋公海渔场', value: 168000 },
          { name: '西南大西洋公海渔场', value: 118000 }
        ]
      }
    }
  },
  computed: {
    chartData() {
      return this.mockData[this.selectedTime]
    }
  },
  mounted() {
    this.$nextTick(() => {
      this.initChart()
      this.updateChart()
    })
  },
  methods: {
    initChart() {
      if (this.$refs.chartContainer) {
        if (this.chartInstance) {
          this.chartInstance.dispose()
        }
        this.chartInstance = echarts.init(this.$refs.chartContainer, this.$echartsConfig.theme)
        this.resizeObserver = new ResizeObserver(() => {
          this.chartInstance && this.chartInstance.resize()
        })
        this.resizeObserver.observe(this.$refs.chartContainer)
      }
    },
    updateChart() {
      if (!this.chartInstance) {
        this.$nextTick(() => {
          if (this.$refs.chartContainer) {
            this.initChart()
          }
        })
        return
      }
      
      const option = createChartOption(
        this.chartData,
        this.fishingGrounds,
        this.colors
      )
      this.chartInstance.setOption(option, true)
    },
    handleTimeChange() {
      this.updateChart()
    }
  },
  beforeDestroy() {
    if (this.chartInstance) {
      this.chartInstance.dispose()
    }
    if (this.resizeObserver && this.$refs.chartContainer) {
      this.resizeObserver.unobserve(this.$refs.chartContainer)
      this.resizeObserver.disconnect()
    }
  }
}
</script>

<style scoped lang="less">
.fishing-grounds-bar-container {
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;

  .time-selector {
    position: absolute;
    top: 5px;
    right: 5px;
    z-index: 10;
    display: flex;
    gap: 8px;
    padding: 4px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 4px;
    pointer-events: auto;

    .radio-label {
      display: flex;
      align-items: center;
      cursor: pointer;
      padding: 3px 6px;
      border-radius: 3px;
      transition: all 0.3s;
      color: rgba(255, 255, 255, 0.7);
      font-size: 11px;
      white-space: nowrap;

      &.active {
        background: rgba(79, 191, 227, 0.6);
        color: #fff;
      }

      &:hover {
        background: rgba(79, 191, 227, 0.4);
        color: #fff;
      }

      .radio-input {
        display: none;
      }

      .radio-text {
        user-select: none;
      }
    }
  }

  .chart-container {
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 1;
    pointer-events: none;
    box-sizing: border-box;
    
    > div {
      pointer-events: auto;
    }
  }
}
</style>

